<template>
  <div id="dress-up">
      <Breadcrumb>
          <BreadcrumbItem>活动设置</BreadcrumbItem>
          <BreadcrumbItem>活动装扮</BreadcrumbItem>
      </Breadcrumb>

      <!--SUI界面-->
      <div id="ui"></div>
      <!--EUI界面-->

      <!--S控制台-->
      <div id="control">
          <Button v-for="item in controls" v-bind:key="item.value" @click="showDrawer(item)">{{item.title}}</Button>
          <Button type="primary" class="confirm" long @click="submit">确认设置</Button>
      </div>
      <!--E控制台-->

      <!--S操作台-->
      <Drawer v-model="drawer.show" :title="drawer.title" :width="drawer.width">
            <keep-alive include="skin">
                <skin v-if="drawer.page == 'skin'" v-model="skin" @on-skin="setSkin"></skin>
            </keep-alive>
      </Drawer>
      <!--E操作台-->

  </div>
</template>

<script>
import skin from "./skin/Skin";
export default {
  name: 'dress-up',
  data(){
    return {
        activity_id:0,
        controls:[
            {
                value:"skin",
                title:"地图皮肤",
                width:200
            }
        ],
        drawer:{
          show:false,
          title:"",
          width:300,
          page:""
        },
        map:null,  //地图对象
        skin:"",  //地图皮肤mapStyle
    }
  },
   components:{
      skin
   },
    watch:{
        skin(){
            this.loadMapUi();
        }
    },
    created(){
      this.activity_id = window.sysinfo.activity_id;
    },
  mounted(){
    this.loadUi()
        .then(()=>{
            this.loadMapUi();
        });
  },
  methods: {
      //加载UI数据
      loadUi() {
        return Axios.post(window.sysinfo.url,Qs.stringify({
            pages:"activityUi",
            doing:"get",
            activity_id:this.activity_id
        }))
            .then((res)=>{
                if(res.data.status == "success"){
                    let data = res.data.data;
                    this.skin = data.skin;
                }
            });
      },
      //提交设置
      submit(){
        var data = {
            activity_id:this.activity_id,
            skin:this.skin,
        }
        Axios.post(window.sysinfo.url,Qs.stringify({
            pages:"activityUi",
            doing:"set",
            data
        }))
            .then((res)=>{
                if(res.data.status == "success"){
                    this.$Message.success("设置成功");
                }else{
                    this.$Message.error("设置失败");
                }
            });
      },
      //加载地图UI
      loadMapUi() {
          this.map = new this.$map.Map("ui", {
              zoom: 18,
              zooms: [15, 18],
              viewMode: "3D",
              pitch: 70,
              dragEnable: false,
              mapStyle: "amap://styles/"+this.skin,
          });
          this.map.plugin(["AMap.ControlBar"], () => {
              var controlBar = new this.$map.ControlBar({
                  position: {
                      bottom: "140px",
                      left: "-90px"
                  },
                  showControlButton: true
              });
              this.map.addControl(controlBar);
          });
      },
      //显示操作台
      showDrawer(item) {
          this.drawer.page = item.value;
          this.drawer.title = item.title;
          this.drawer.width = item.width;
          this.drawer.show = true;
      },
      //操作的地图皮肤
      setSkin(value){
        this.skin = value;
      }
  }
}
</script>

<style lang="less" scoped src="./dress-up.less"></style>
